<template>
  <div>
    <el-dialog title="结算" :visible.sync="dialogVisible" width="60%">
      <el-table :data="orderData" border class="orderTable">
        <el-table-column
          property="trade_no"
          label="订单"
          align="center"
          width="200"
        />
        <el-table-column label="租期" align="center">
          <template slot-scope="scope">
            <span
              >{{ scope.row.which_period }}/{{ scope.row.month_total }}</span
            >
          </template>
        </el-table-column>
        <el-table-column property="rent" label="租期金额" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.rent">￥{{ scope.row.rent }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="手续费率" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.fixed_amount != 0"
              >{{ scope.row.fixed_amount }}+</span
            >
            <span v-if="scope.row.shop_rate != 0"
              >{{ scope.row.shop_rate }}%</span
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          property="service_fee"
          label="手续费金额"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.service_fee != 0"
              >￥{{ scope.row.service_fee }}</span
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="结算金额" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.settle_amount != 0" class="red-font"
              >￥{{ scope.row.settle_amount }}</span
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          property="financing_type"
          label="账户类型"
          align="center"
        />
        <el-table-column property="is_risk" label="是否风控" align="center" />
      </el-table>
      <div class="centerDiv">
        <p>手续费率明细</p>
      </div>
      <el-table :data="orderData" border class="rateTable">
        <el-table-column label="合同" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.smartcontract_amount"
              >{{ scope.row.smartcontract_amount }}元</span
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="实名认证" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.realname_amount"
              >{{ scope.row.realname_amount }}元</span
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="代扣" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.withhold_rate"
              >{{ scope.row.withhold_rate }}%</span
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="存证" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.file_rate">{{ scope.row.file_rate }}%</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="平台手续费" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.platform_rate"
              >{{ scope.row.platform_rate }}%</span
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="保险" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.insure_rate"
              >{{ scope.row.insure_rate }}%</span
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="iconDiv">
        <el-table
          :data="orderData"
          border
          class="rateTable"
          :show-header="false"
        >
          <el-table-column
            property="smartcontract_amount"
            label="合同"
            align="center"
          >
            <template slot-scope="scope">
              <img
                v-if="scope.row.smartcontract_amount > 0"
                src="../../../assets/images/correct-icon.png"
                alt=""
              />
              <img v-else src="../../../assets/images/error-icon.png" alt="" />
            </template>
          </el-table-column>
          <el-table-column
            property="realname_amount"
            label="实名认证"
            align="center"
          >
            <template slot-scope="scope">
              <img
                v-if="scope.row.realname_amount > 0"
                src="../../../assets/images/correct-icon.png"
                alt=""
              />
              <img v-else src="../../../assets/images/error-icon.png" alt="" />
            </template>
          </el-table-column>
          <el-table-column property="risk_amount" label="风控" align="center">
            <template slot-scope="scope">
              <img
                v-if="scope.row.risk_amount > 0"
                src="../../../assets/images/correct-icon.png"
                alt=""
              />
              <img v-else src="../../../assets/images/error-icon.png" alt="" />
            </template>
          </el-table-column>
          <el-table-column label="代扣" align="center">
            <template slot-scope="scope">
              <img
                v-if="scope.row.withhold_rate > 0"
                src="../../../assets/images/correct-icon.png"
                alt=""
              />
              <img v-else src="../../../assets/images/error-icon.png" alt="" />
            </template>
          </el-table-column>
          <el-table-column label="存证" align="center">
            <template slot-scope="scope">
              <img
                v-if="scope.row.file_rate > 0"
                src="../../../assets/images/correct-icon.png"
                alt=""
              />
              <img v-else src="../../../assets/images/error-icon.png" alt="" />
            </template>
          </el-table-column>
          <el-table-column label="平台手续费" align="center">
            <template slot-scope="scope">
              <img
                v-if="scope.row.platform_rate > 0"
                src="../../../assets/images/correct-icon.png"
                alt=""
              />
              <img v-else src="../../../assets/images/error-icon.png" alt="" />
            </template>
          </el-table-column>
          <el-table-column label="保险" align="center">
            <template slot-scope="scope">
              <img
                v-if="scope.row.insure_rate > 0"
                src="../../../assets/images/correct-icon.png"
                alt=""
              />
              <img v-else src="../../../assets/images/error-icon.png" alt="" />
            </template>
          </el-table-column>
        </el-table>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureSettle">确认结算</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getSettleData, orderSettle } from "@/api/finance";
export default {
  props: ["leaseId"],
  data() {
    return {
      dialogVisible: false,
      which_period: "",
      orderData: [],
    };
  },
  methods: {
    sureSettle() {
      orderSettle(this.leaseId).then((res) => {
        this.dialogVisible = false;
        this.$parent.getList();
      });
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        getSettleData(this.leaseId)
          .then((res) => {
            this.which_period = res.which_period;
            this.orderData = [{}];
            for (var i in res) {
              this.$set(this.orderData[0], i, res[i]);
            }
          })
          .catch((err) => {
            this.orderData = [];
          });
      }
    },
  },
};
</script>

<style lang="scss" scope>
.orderTable {
  margin-top: 20px;
}
.rateTable {
  margin: 0 0 50px;
}
.centerDiv {
  text-align: center;
  margin: 20px 0 10px;
  cursor: pointer;
  p {
    font-size: 16px;
    user-select: none;
  }
}
.iconDiv {
  margin-top: -51px;
}
</style>